<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.10.0/css/zui.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body, html {

            height: 1200px;
        }

        body, button, input, select, textarea {
            font: 12px/1.5 "Microsoft YaHei"
        }

        .header {
            overflow: hidden;
            background-color: #0a0604;
            height: 60px;

        }

        #app {
            background-color: #f8f8f8;
        }

        .inbody {
            position: relative;
            top: 0;
            background-color: #f8f8f8;
            width: 980px;
            margin: 0 auto;
            height: 1600px;
        }

        .foot {
            overflow: hidden;
            background-color: #414141;
            width: 100%;
            height: 220px;
            position: relative;
            bottom: 0;
        }

        div.box {
            position: relative;
            height: 30px;
            min-width: 400px;
        }

        div.box p#id1 {
            position: relative;
            margin-left: 0px;
            display: inline-block;
            float: left;
            clear: none;
        }

        div.box p#id2 {
            position: relative;
            margin-right: 0px;
            display: inline-block;
            float: right;
            clear: none;
        }

        #headshow {
            overflow: hidden;
            position: relative;
            margin-top: -117px;
            margin-left: 0px;
            display: inline-block;
            float: left;
            clear: none;
        }

        .headbuttom {
            overflow: hidden;
            border-radius: 0%;
            border: 0;
            margin-top: -5px;
            background-color: black;

            height: 60px;
        }

        .modules {
            height: 400px;
            overflow: hidden;
            position: relative;
            margin-right: 0px;
            background-color: #f8f8f8;


            clear: none;
        }

        #chartcar {
            overflow: hidden;
            margin-right: 0px;
            display: inline-block;
            float: right;
            clear: none;
            position: relative;
            height: 300px;
            width: 980px;
            top: 0px;
        }

        #chartcar1 {
            position: relative;
            overflow: hidden;
            margin-right: 0px;
            display: inline-block;
            float: right;
            clear: none;
            background-color: #ffffff;
            position: relative;
            height: 100px;
            width: 980px;
            top: 0px;
        }

        #chartcar2 {
            position: relative;
            overflow: hidden;
            margin-right: 0px;
            display: inline-block;
            float: right;
            clear: none;
            background-color: #ffffff;
            position: relative;
            height: 600px;
            width: 980px;
            top: 0px;
        }

        #chartcar3 {
            position: relative;
            overflow: hidden;
            margin-right: 0px;
            display: inline-block;
            float: right;
            clear: none;
            background-color: #ffffff;
            position: relative;
            height: 35px;
            width: 980px;
            top: 0px;
        }

        #chartcar4 {
            position: relative;
            overflow: hidden;
            margin-right: 0px;
            display: inline-block;
            float: right;
            clear: none;
            background-color: #ffffff;
            position: relative;
            height: 35px;
            width: 980px;
            top: 0px;
        }

        #total {
            float: inherit;
            overflow: hidden;
            margin-top: 20px;
            width: 200px;
            height: 60px;


        }

        #payButton {
            overflow: hidden;

            top: 20px;
            bottom: 0;
            /*水平方向居中*/
            /*行内文本居中*/
            width: 300px;
            height: 100px;
            line-height: 100px;
            left: 20px;
            margin-left: 30px;

        }

        #second {
            height: 200px;
            margin-top: -98px;

            overflow: hidden;
            position: relative;
            margin-right: 0px;
            background-color: #f8f8f8;


            clear: none;
        }

        #thrid {
            height: 200px;
            margin-top: -38px;

            overflow: hidden;
            position: relative;
            margin-right: 0px;
            background-color: #f8f8f8;


            clear: none;
        }

        #fourth {
            height: 104px;
            margin-top: 6px;

            overflow: hidden;
            position: relative;
            margin-right: 0px;
            background-color: #f8f8f8;


            clear: none;
        }

        #fifth {
            height: 200px;
            margin-top: 6px;

            overflow: hidden;
            position: relative;
            margin-right: 0px;
            background-color: #f8f8f8;


            clear: none;
        }

        #payform {
            overflow: hidden;
            margin-top: -6px;
            margin-left: 10px;


        }

        #list {

            overflow: hidden;
            margin-top: -6px;
            margin-left: 10px;
            height: 45px;


        }

        #list2 {

            overflow: hidden;
            margin-top: -6px;
            margin-left: 10px;
            height: 45px;


        }

        #hongbao {
            margin-top: 10px;
            overflow: hidden;
            background-color: #ffffff;
            height: 45px;
        }

        #form1 {
            overflow: hidden;
            margin-top: 0px;
        }

        #payform1 {
            overflow: hidden;
            margin-top: 0px;
            margin-left: 10px;
        }

        #hongbao1 {
            overflow: hidden;
            height: 60px;
            margin-top: 0px


        }
        .button{
            overflow: hidden;
        }

        .money {
            overflow: hidden;
            float: left;
            float: bottom;
            margin-left: 0;
            margin-bottom: 0;
        }

        .el-input {
            width: 90%;
            height: 60px;
        }

        #address {
            overflow: hidden;
            margin-top: 60px;
            border: 1px dotted #b4a078;
            background-color: #ffffff;
            width: 200px;
            height: 165px;
        }

        .edit {
            border: #b4a078;
            color: #ffffff;
            background-color: #b4a078;
        }
        #steps{
            overflow: hidden;
            margin-left: 1042px;
            height: 60px;
        }
        .el-table__body-wrapper{   /* /deep/深度监听 */
            height: 135px !important; /*给到固定的高度(内容高度要超过此高度)*/
            overflow-y: scroll;  /*y轴溢出显示滚动条*/

        }



        .titlehtml {
            position: absolute;
            top: 10px;

        }


    </style>
</head>
<body>
<div id="app">

    <!--页面头-->
    <div class="header">
        <div id="steps" >

            <el-steps :active="1" space=20% align-center>
                <el-step title="步骤 1" ></el-step>
                <el-step title="步骤 2" ></el-step>
                <el-step title="步骤 3" ></el-step>
            </el-steps>
        </div>
    </div>

    <!--页面主题-->
    <div class="inbody">
        <div id="headshow">


            <el-row>
                <el-button class="headbuttom" style="color: white ">首页</el-button>
                <el-button class="headbuttom" style="color: white ">默认</el-button>
                <el-button class="headbuttom" style="color: white ">默认</el-button>

            </el-row>
        </div>


        <!--            body中需要展示的模块，复用id为modules-->
        <div><a href="javascript:void(0)" style="margin-top: -30px;
            overflow: hidden;
            margin-left: 0px;
            float: left;
            clear: none;
            height: 30px;
            min-width: 80px;
            font-size: 20px;
            color: #0a0604
            ">商品列表</a></div>
        <div id="address">

            <div>

                <i class="el-icon-plus" style="margin-top: 100px"></i>

            </div>



        </div>
        <div class="modules">


            <a href="javascript:void(0)" style="margin-top: 40px;
            overflow: hidden;
            margin-left: 0px;
            float: left;
            clear: none;
            height: 30px;
            min-width: 80px;
            font-size: 20px;
            color: #0a0604
            ">商品列表</a>
            <a href="javascript:void(0)" style="margin-top: 40px;
            overflow: hidden;
            margin-right: 0px;
            float: right;
            clear: none;
            height: 30px;
            min-width: 80px;">返回修改购物车</a>


            <!--        购物车模块-->
            <div id="chartcar">
                <template>
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                    >

                        <el-table-column

                                label=""
                                width="60">
                            <template v-slot="scope">
                                <img :src="scope.row.url" alt="" width="50" height="30">
                            </template>
                        </el-table-column>
                        <el-table-column

                                label="       商品名称"
                                width="240"
                                align="left">
                            <template slot-scope="scope">{{scope.row.title}}</template>

                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="属性"
                                width="120">

                        </el-table-column>


                        <el-table-column
                                prop="price"
                                label="单价"
                                width="120">

                        </el-table-column>
                        <el-table-column
                                prop="num"
                                label="数量"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                label="小计"
                                prop="total"
                                width="120">

                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label=" "></el-table-column>

                        <a href="javascript:void(0)">删除</a>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px;margin-left:20px;display: inline-block">
                        <a href="javascript:void(0)"> 购物金额小计 ￥0.00，比市场价 ￥0.00 节省了 ￥0.00 (0)</a>
                    </div>

                    <div id="total">2件商品，总价：￥398.00</div>
                </template>


            </div>


        </div>

        <div id="second">


            <a href="javascript:void(0)" style="margin-top: 40px;
            overflow: hidden;
            margin-left: 0px;
            float: left;
            clear: none;
            height: 30px;
            min-width: 80px;
            font-size: 20px;
            color: #0a0604">支付方式</a>


            <!--        购物车模块-->
            <div id="chartcar1">
                <div id="payButton">
                    <el-button>支付宝</el-button>
                    <el-button>微信扫码登录</el-button>
                </div>
            </div>


        </div>
        <div id="thrid">


            <a href="javascript:void(0)" style="margin-top: 40px;
            overflow: hidden;
            margin-left: 0px;
            float: left;
            clear: none;
            height: 30px;
            min-width: 80px;
            font-size: 20px;
            color: #0a0604">其它信息</a>
            <div id="chartcar2">
                <div id="payform">

                    <div id="hongbao">
                        <div id="form1">
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item label="使用红包:"></el-form-item>
                                <el-form-item label="请选择红包序列号">
                                    <el-select v-model="formInline.region" placeholder="活动区域"
                                               size="small">
                                        <el-option label="区域一" value="11111"></el-option>
                                        <el-option label="区域二" value="22222"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="或者输入红包">
                                    <el-input size="small" v-model="formInline.user" placeholder="审批人"></el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button class="edit" type="primary" @click="onSubmit" size="small">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>


                </div>
                <div id="payform1">
                    <div id="hongbao1">
                        <el-input
                                size="small"
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="input2">
                        </el-input>
                    </div>

                </div>
                <div id="payform2">
                    <div id="hongbao2">
                        缺货处理:
                        <el-radio-group v-model="radio">
                            <el-radio :label="3">备选项</el-radio>
                            <el-radio :label="6">备选项</el-radio>
                            <el-radio :label="9">备选项</el-radio>
                        </el-radio-group>
                    </div>


                </div>


            </div>


        </div>
        <div id="fourth">


            <a href="javascript:void(0)" style="margin-top: 40px;
            overflow: hidden;
            margin-left: 0px;
            float: left;
            clear: none;
            height: 30px;
            min-width: 80px;
            font-size: 20px;
            color: #0a0604">费用总计</a>
            <div id="chartcar3">
                <div id="show1">
                    <div id="list">
                        <a href="javascript:void(0)" style="margin-top: 11px;
            overflow: hidden;
            margin-right: 0px;
            float: right;
            clear: none;
            height: 30px;
            min-width: 80px;">商品总价: ￥1197.00</a>
                    </div>


                </div>


            </div>


        </div>
        <div id="fifth">


            <div id="chartcar4">
                <div id="show2">
                    <div id="list2">
                        <a href="javascript:void(0)" style="margin-top: 11px;
            overflow: hidden;
            margin-right: 0px;
            float: right;
            clear: none;
            height: 30px;
            min-width: 80px;">应付款金额: ￥1197.00</a>
                    </div>


                </div>


            </div>


        </div>


        <!--        购物车模块-->


    </div>


</div>


</div>
<div class="foot">
    <!--        <span >收货人信息</span><div style="clear:both"></div>-->
    <!--    </div>-->
    <!--    <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">启动对话框</button>-->

    <!--    &lt;!&ndash; 对话框HTML &ndash;&gt;-->
    <!--    <div class="modal fade" id="myModal">-->
    <!--        <div class="modal-dialog">-->
    <!--            <div class="modal-content">-->
    <!--                <div style="height: 360px">-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.10.0/lib/jquery/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.10.0/js/zui.min.js"></script>

<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

                tableData: [{
                    title: '测试标题',
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    content: '详情',
                    price: '￥499.00',
                    num: 4,
                    total: '￥499.00'
                },
                    {
                        title: '测试标题',
                        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                        content: '详情',
                        price: '￥499.00',
                        num: 4,
                        total: '￥499.00'
                    },
                    {
                        title: '测试标题',
                        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                        content: '详情',
                        price: '￥499.00',
                        num: 4,
                        total: '￥499.00'
                    }, {
                        title: '测试标题',
                        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                        content: '详情',
                        price: '￥499.00',
                        num: 40,
                        total: '￥499.00'
                    }],
                multipleSelection: [],
                formInline: {
                    user: '',
                    region: ''
                },
                input2: "",
                radio: 3
            }

        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }

        }
    })
</script>
</html>